<template>
    <div class="ReserveEdit">
        <div  style="text-align: left;font-size: 18px;font-weight: bold;margin-bottom: 10px;margin-top: 10px">
            <el-tag size="large" v-if="form.state === '0'" close-transition type="danger"  effect="dark" style="width: 220px;text-align: center">当前状态：待提交</el-tag>
            <el-tag size="large"  v-else-if="form.state === '1'" close-transition  type="warning"  effect="dark">当前状态：待镇党委审核</el-tag>
            <el-tag size="large" v-else-if="form.state === '2'" close-transition  type="primary"  effect="dark"  style="width: 220px;text-align: center">当前状态：待市委审核</el-tag>
            <el-tag size="large" v-else-if="form.state === '3'" close-transition  type="success"  effect="dark"  style="width: 220px;text-align: center">当前状态：市委审核通过</el-tag>
            <el-popover  placement="right"  width="400" trigger="click" >
                <el-timeline style="height: 350px;padding-top: 10px;overflow-y: scroll">
                    <el-timeline-item
                        v-for="(activity, index) in activities"
                        :key="index"
                        :color="activity.color"
                        :timestamp="activity.modifiedAt">
                        <div>
                            <el-tag v-if="activity.status == '0'" close-transition type="success"  effect="dark">编辑</el-tag>
                            <el-tag v-else-if="activity.status == '1'" close-transition  type="primary"  effect="dark">提交</el-tag>
                            <el-tag v-else close-transition  type="danger"  effect="dark">审核</el-tag>
                            {{activity.auditor}}
                            {{activity.auditAdvice}}
                        </div>
                    </el-timeline-item>
                </el-timeline>
                <el-button slot="reference" type="text" @click="loadUpdateInfoList()">信息更新记录</el-button>
            </el-popover>
            <div style="float: right;padding-right: 25px">
                <div style="display: inline-block;font-size: 16px;color: red">
                    <p v-show="isHasTask">友情提示: 村干部信息更新任务已发布（<span style="color: goldenrod;font-weight: bold;text-decoration: underline">截止日期{{endTime}}</span>），当前信息可进行修改、保存、提交等操作！</p>
                    <p v-show="!isHasTask">友情提示: 村干部信息更新任务未发布，当前信息不可进行修改、保存、提交等操作！</p>
                </div>
            </div>
        </div>
        <el-form class="edit-form" v-loading="editLoad" ref="baseForm" label-position="right" :model="form" :rules="rules" label-width="120px">
            <el-row :gutter="40" style="margin-top: 20px">
                <el-col :span="4">
                    <el-card shadow="hover" style="height: 330px" class="header-content">
                        <el-upload
                            action=""
                            :auto-upload="true"
                            :file-list="images"
                            :http-request="uploadFile"
                            list-type="picture-card">
                            <i class="el-icon-plus"></i>
                        </el-upload>
                        <div style="position: relative;top: 250px;z-index: 110">
                            <i class="el-icon-edit" style="color: goldenrod;" ></i>
                            <el-input size="large" class="name-input" v-model="form.name" placeholder="村干部姓名"></el-input>
                            <div style="width: 200px;margin: 0 auto">
                                <el-button type="success" size="small" :disabled="buttonDisabled" @click="saveBaseInfo('baseForm')">保存</el-button>
                                <el-button type="primary" size="small" :disabled="!submitable||buttonDisabled" @click="submit">提交</el-button>
                            </div>
                            <icon name="qrcode" scale="2.7" class="qrcode-content" @click.native="showQrCode()"></icon>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="10" >
                    <el-card shadow="hover" style="height: 330px" class="baseMassage">
                        <p class="cardTitle">基本信息</p><br>
                        <el-col :span="12" style="padding: 0">
                            <el-form-item label="性别" prop="sex">
                                <el-select v-model="form.sex"  placeholder="请选择性别">
                                    <el-option v-for="item in sexOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="出生日期" prop="birth">
                                <el-date-picker
                                    v-model="form.birth"
                                    type="date"
                                    placeholder="请选择出生日期"
                                    value-format="yyyy-MM-dd">
                                </el-date-picker>
                            </el-form-item>
                            <el-form-item label="民族">
                                <el-select v-model="form.nation" placeholder="请选择民族">
                                    <el-option v-for="item in nationOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="籍贯">
                                <el-input v-model="form.nativePlace"  placeholder="请输入籍贯"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12" style="padding: 0; min-height: 210px;">
                            <el-form-item label="身份证号" prop="identityCard">
                                <el-input show-word-limit minlength="18" v-model="form.identityCard"  placeholder="请输入身份证号">
                                    <el-popover
                                        v-show="form.identityCardAnnex"
                                        slot="prefix"
                                        placement="left"
                                        width="330"
                                        trigger="hover">
                                        <div v-for="subItem in handleImage(form.identityCardAnnex)" >
                                            <el-image :src="subItem"></el-image>
                                        </div>
                                        <el-button slot="reference" type="text"><i class="el-icon-picture"></i></el-button>
                                    </el-popover>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="联系电话"  prop="contact">
                                <el-input v-model="form.contact"  placeholder="请输入联系电话"></el-input>
                            </el-form-item>
                            <el-form-item label="医疗保险" prop="medicalInsurance">
                                <el-select v-model="form.medicalInsurance"  placeholder="请选择医疗保险">
                                    <el-option v-for="item in medicalInsuranceOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="养老保险" prop="socialSecurityDatabases">
                                <el-select v-model="form.socialSecurityDatabases"  placeholder="请选择养老保险">
                                    <el-option v-for="item in socialSecurityDatabasesOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <div class="tempSaveBtn">
                            <el-button type="success" plain size="small" :disabled="buttonDisabled" @click="saveTempInfo()">保存</el-button>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="10">
                    <el-card shadow="hover" style="height: 330px" class="workMessage">
                        <p class="cardTitle">基本工作信息</p><br>
                        <el-col :span="13" style="padding: 0">
                            <!-- <el-form-item label="担任职务" class="villageEditSel">
                                <el-select v-model="cadresPostList" placeholder="请选择" filterable multiple @change="handlePost()">
                                    <el-option v-for="item in postOptions"  :value="item.value" :label="item.label" :key="item.value" >
                                    </el-option>
                                </el-select>
                            </el-form-item> -->
                            <el-form-item label="政治面貌" prop="politicalOutlook">
                                <el-select v-model="form.politicalOutlook"  placeholder="请选择政治面貌" clearable @change="handlePartyTime">
                                    <el-option v-for="item in politicalOutlook" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="学历"  prop="fullTimeEdu">
                                <el-select v-model="form.fullTimeEdu"  placeholder="请选择学历" clearable>
                                    <el-option v-for="item in eduOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                    <el-popover
                                        v-show="form.educationAnnex"
                                        slot="prefix"
                                        placement="top"
                                        width="330"
                                        trigger="hover">
                                        <div style="height: 600px;overflow-x: scroll">
                                            <div v-for="subItem in handleImage(form.educationAnnex)" >
                                                <el-image :src="subItem"></el-image>
                                            </div>
                                        </div>
                                        <el-button slot="reference" type="text"><i  class="el-icon-picture"></i></el-button>
                                    </el-popover>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="毕业院校">
                                <el-input v-model="form.fullTimeSchool" placeholder="请输入毕业院校"></el-input>
                            </el-form-item>
                            <el-form-item label="是否村委会委员">
                               <el-select v-model="form.memberOfCommittee"  placeholder="请选择" clearable>
                                    <el-option value="是" label="是"></el-option>
                                    <el-option value="否" label="否"></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="11" style="padding: 0;min-height: 210px;">
                            <el-form-item label="在村工作年限" prop="onDutyTime">
                                <el-input type="number" placeholder="请输入在村工作年限" v-model="form.onDutyTime" >
                                    <el-popover
                                        v-show="form.workTimeAnnex"
                                        slot="prefix"
                                        placement="top"
                                        width="330"
                                        trigger="hover">
                                        <div v-for="subItem in handleImage(form.workTimeAnnex)" >
                                            <el-image :src="subItem"></el-image>
                                        </div>
                                        <el-button slot="reference" type="text"><i class="el-icon-picture"></i></el-button>
                                    </el-popover>
                                </el-input>
                            </el-form-item>
                            <el-form-item label="入党时间" prop="partyTime" v-if="form.politicalOutlook === '党员'" >
                                <div>
                                    <el-popover
                                        v-show="form.partyTimeAnnex"
                                        slot="prefix"
                                        placement="left"
                                        width="330"
                                        trigger="hover">
                                        <div v-for="subItem in handleImage(form.partyTimeAnnex)" >
                                            <el-image :src="subItem"></el-image>
                                        </div>
                                        <el-button style="position: relative;margin-left: -20px;left: 3px" slot="reference" type="text"><i class="el-icon-picture"></i></el-button>
                                    </el-popover>
                                    <el-date-picker
                                        v-model="form.partyTime"
                                        type="date"
                                        placeholder="请选择入党时间"
                                        value-format="yyyy-MM-dd">
                                    </el-date-picker>
                                </div>
                            </el-form-item>
                            <el-form-item label="健康状况"  prop="health">
                                <el-select v-model="form.health"  placeholder="请选择健康状况" clearable>
                                    <el-option v-for="item in healthOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="薪酬等级">
                               <el-select v-model="form.wageScale"  placeholder="请选择薪酬等级" clearable>
                                    <el-option v-for="item in wageScaleOptions" :value="item.value" :label="item.label" :key="item.value"></el-option>
                                    <el-popover
                                        v-show="form.wageScaleAnnex"
                                        slot="prefix"
                                        placement="top"
                                        width="330"
                                        trigger="hover">
                                        <div style="height: 600px;overflow-x: scroll">
                                            <div v-for="subItem in handleImage(form.wageScaleAnnex)" >
                                                <el-image :src="subItem"></el-image>
                                            </div>
                                        </div>
                                        <el-button slot="reference" type="text"><i  class="el-icon-picture"></i></el-button>
                                    </el-popover>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="是否村党组织委员">
                               <el-select v-model="form.memberOfPart"  placeholder="请选择" clearable>
                                    <el-option value="是" label="是"></el-option>
                                    <el-option value="否" label="否"></el-option>
                                </el-select>
                            </el-form-item>
                           <!-- <el-form-item label="在职学校">
                                <el-input v-model="form.partTimeSchool" placeholder="请输入非全日制学校"></el-input>
                            </el-form-item>-->
                        </el-col>
                        <div class="tempSaveBtn">
                            <el-button type="success" plain size="small" :disabled="buttonDisabled" @click="saveTempInfo()">保存</el-button>
                        </div>
                    </el-card>
                </el-col >
            </el-row>
            <el-row :gutter="40" style="margin-top: 40px">
                <el-col :span="8">
                  <el-card shadow="hover" style="min-height: 320px" class="endowment_insurance" >
                    <p class="cardTitle">社会保险信息</p>
                    <div style="clear: both"></div>
                    <br>
                    <div class="cardContent" >
                      <el-form class="socialSecurityForm" ref="baseForm" :rules="rules" label-position="top" label-width="125px" :model="form" inline >
                          <!-- <el-form-item label="医疗保险" prop="medicalInsurance">
                                <el-select v-model="form.medicalInsurance"  placeholder="请选择医疗保险类型">
                                    <el-option v-for="item in medicalInsuranceOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option></el-select>
                          </el-form-item>
                          <el-form-item label="参保时间" prop="insuredTime">
                            <el-date-picker
                                v-model="form.insuredTime"
                                type="date"
                                placeholder="请选择参保时间"
                                value-format="yyyy-MM-dd">
                            </el-date-picker>
                          </el-form-item>
                          <el-form-item label="缴费年限（月）" prop="insurancePaymentPeriod">
                            <el-input type="number" v-model="form.insurancePaymentPeriod" placeholder="请填写缴费年限"></el-input>
                          </el-form-item>
                          <el-form-item label="当前一级账户余额" prop="primaryAccountBalance">
                            <el-input type="number" v-model="form.primaryAccountBalance" placeholder="请填写当前一级账户余额"></el-input>
                          </el-form-item>
                          <el-form-item label="当前二级账户余额" prop="secondaryAccountBalance">
                            <el-input type="number" v-model="form.secondaryAccountBalance" placeholder="请填写当前二级账户余额"></el-input>
                          </el-form-item>
                          <el-form-item label="当前医保账户余额" prop="insuranceAccountBalance">
                            <el-input type="number" v-model="form.insuranceAccountBalance" placeholder="请填写当前医保账户余额"></el-input>
                          </el-form-item>
                          <div class="card_line"></div> -->
                          <el-form-item label="养老保险" prop="socialSecurityDatabases" style="margin-left: 18px;">
                            <el-select v-model="form.socialSecurityDatabases" placeholder="请选择养老保险类型">
                                <el-option v-for="item in socialSecurityDatabasesOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item label="缴费年限" prop="paymentPeriod" >
                            <el-input type="number" v-model="form.paymentPeriod"  placeholder="请选填写养老保险缴费年限"></el-input>
                          </el-form-item>
                          <el-form-item label="上年账户累计储存额" prop="depositBalance" style="margin-left: 18px;">
                            <el-input type="number" v-model="form.depositBalance" placeholder="请填写养老保险上年账户累计储存额"></el-input>
                          </el-form-item>
                          <el-form-item label="在职/退休" prop="hasOnTheJob" >
                            <el-select v-model="form.hasOnTheJob"  placeholder="请选择在职/退休">
                                <el-option v-for="item in hasOnTheJob" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                            </el-select>
                          </el-form-item>
                          <el-form-item v-if="isShowRetirementWage" label="退休工资" prop="retirementWage" style="margin-left: 18px;" placeholder="请填写退休工资">
                            <el-input type="number" v-model="form.retirementWage"></el-input>
                          </el-form-item>
                          <el-form-item  v-if="isShowRetirementWage" label="退休工资" prop="retirementWage" style="margin-left: 18px;visibility: hidden" placeholder="请填写退休工资">
                            <el-input type="number" v-model="form.retirementWage"></el-input>
                          </el-form-item>
                      </el-form>
                    </div>
                    <div class="tempSaveBtn" >
                      <el-button type="success" plain size="small" :disabled="buttonDisabled"  @click="saveTempInfo()">保存</el-button>
                    </div>
                  </el-card>
                </el-col>
                <el-col :span="8" >
                    <el-card shadow="hover" style="min-height: 320px" class="workExperience" >
                        <p class="cardTitle">工作简历</p><br>
                        <div class="cardContent">
                          <el-form v-for="(item, index) in workExperienceList" :key="index" label-position="top"  label-width="110px" :model="item" >
                                <el-form-item label="任职时间" >
                                  <el-date-picker
                                    v-model="item.dateStart"
                                    type="month"
                                    value-format="yyyy.MM"
                                    placeholder="选择月">
                                  </el-date-picker>
                                  &nbsp;—&nbsp;
                                  <el-date-picker
                                    v-model="item.dateEnd"
                                    type="month"
                                    value-format="yyyy.MM"
                                    placeholder="选择月">
                                  </el-date-picker>
                                </el-form-item>
                                <el-form-item label="担任职务">
                                    <el-input type="textarea" v-model="item.note" :placeholder="workExperiencePlaceholder" :rows="2" resize></el-input>
                                </el-form-item>
                                <el-divider style="margin-top: 0px"><icon name="delete" scale="2" @click.native="delItem('workExperience',index)"></icon></el-divider>
                            </el-form>
                          <div class="add-btn" @click="pushItem('workExperience')">
                                <i class="el-icon-plus"></i>
                          </div>
                        </div>
                        <div class="tempSaveBtn">
                            <el-button type="success" plain size="small" :disabled="buttonDisabled" @click="saveTempInfo()">保存</el-button>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover" style="min-height: 320px" class="repaid">
                        <p class="cardTitle">报酬情况</p><br>
                        <div class="cardContent" >
                            <el-form v-for="(item, index) in form.rewards" label-position="top"  label-width="110px" :model="item" :ref="`rewardsForm${index}`"  inline  >
                                <el-form-item label="年份" >
                                    <el-date-picker
                                        v-model="item.achieveTime"
                                        type="year"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item label="基本报酬(元/年)">
                                    <el-input type="text" v-model="item.basicReward"  @input="getSum(item)"></el-input>
                                </el-form-item>
                                <el-form-item label="考核报酬(元/年)">
                                    <el-input type="text" v-model="item.reviewReward"  @input="getSum(item)"></el-input>
                                </el-form-item>
                                <el-form-item label="增收奖励(元/年)">
                                    <el-input type="text" v-model="item.otherReward"  @input="getSum(item)"></el-input>
                                </el-form-item>
                                <el-form-item label="其他(元/年)">
                                    <el-input type="text" v-model="item.des"  @input="getSum(item)"></el-input>
                                </el-form-item>
                                <el-form-item label="总报酬(元/年)" >
                                    <el-input type="text" v-model="item.totalReward" disabled readonly></el-input>
                                </el-form-item>
                                <el-form-item label="佐证材料" >
                                    <CommonFileUpload :isText=false class="fileButton" :value="item.supportDoc" @getValue="item.supportDoc = $event"></CommonFileUpload>
                                </el-form-item>
                                <el-form-item label="总报酬(元/年)" style="visibility: hidden">
                                    <el-input type="text" v-model="item.totalReward" disabled readonly></el-input>
                                </el-form-item>
                                <el-divider style="margin-top: 0px"><icon name="delete" scale="2" @click.native="delItem('rewards',index)"></icon></el-divider>
                            </el-form>
                            <div class="add-btn" @click="pushItem('rewards')">
                                <i class="el-icon-plus"></i>
                            </div>
                        </div>
                        <div class="tempSaveBtn">
                            <el-button type="success" plain size="small" :disabled="buttonDisabled" @click="saveTempInfo()">保存</el-button>
                        </div>
                    </el-card>
                </el-col>

            </el-row>
            <el-row  :gutter="40" style="margin-top: 40px">
                <el-col :span="8">
                    <el-card shadow="hover" style="min-height: 320px" class="inCountry">
                        <p class="cardTitle">在村工作具有近亲属关系人员</p><br>
                        <div class="cardContent">
                            <el-form v-for="(item, index) in form.familyWorkInfoVOS" label-position="top" :model="item" :ref="`familyWorkForm${index}`" inline>
                                <el-form-item label="姓名">
                                    <el-input type="text" v-model="item.name"></el-input>
                                </el-form-item>
                                <el-form-item label="称谓">
                                    <el-input type="text" v-model="item.appellation"></el-input>
                                </el-form-item>
                                <el-form-item label="政治面貌">
                                    <el-select v-model="item.politicalStatus">
                                        <el-option v-for="item in Political" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="职务">
                                    <el-input type="text" v-model="item.job"></el-input>
                                </el-form-item>
                                <el-form-item label="在村工作时长">
                                    <el-input type="text" v-model="item.duration"></el-input>
                                </el-form-item>
                                <el-form-item label="站位" style="visibility: hidden">
                                    <el-input type="text" v-model="item.duration"></el-input>
                                </el-form-item>
                                <el-divider style="margin-top: 0px"><icon name="delete" scale="2" @click.native="delItem('familyWorkInfoVOS',index)"></icon></el-divider>
                            </el-form>
                            <div class="add-btn" @click="pushItem('familyWorkInfoVOS')">
                                <i class="el-icon-plus"></i>
                            </div>
                        </div>
                        <div class="tempSaveBtn">
                            <el-button type="success" plain size="small" :disabled="buttonDisabled" @click="saveTempInfo()">保存</el-button>
                        </div>
                    </el-card>
                </el-col>
                <el-col :span="8">
                    <el-card shadow="hover" style="min-height: 320px"  class="honer" >
                        <p class="cardTitle">奖惩情况</p><br>
                        <div class="cardContent">
                            <el-form v-for="(item, index) in form.honours" label-position="top"  :model="item" :ref="`honourForm${index}`" inline>
                                <el-form-item label="奖或惩">
                                    <el-select type="text" v-model="item.rewardsType">
                                        <el-option v-for="item in rewardsTypeOptions" :value="item.value" :label="item.label" :key="item.value" ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="时间">
                                    <el-date-picker
                                        v-model="item.achieveTime"
                                        type="year"
                                        value-format="yyyy-MM-dd"
                                        placeholder="选择日期">
                                    </el-date-picker>
                                </el-form-item>
                                <el-form-item  v-show="item.rewardsType == '表彰'" label="特殊表彰">
                                    <el-select type="text" v-model="item.honourType">
                                        <el-option v-for="subItem in honourType" :value="subItem.value" :label="subItem.label" :key="subItem.value" ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item  v-show="item.rewardsType == '表彰'" label="表彰级别">
                                    <el-select type="text" v-model="item.honourDescription">
                                        <el-option v-for="subItem in honourDescriptionOptions" :value="subItem.value" :label="subItem.label" :key="subItem.value" ></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="奖惩内容">
                                    <el-input type="textarea" v-model="item.content" :rows="3"></el-input>
                                </el-form-item>
                                <el-form-item label="佐证材料" class="upFileStyle">
                                    <CommonFileUpload :isText=false  class="fileButton"  :value="item.supportDoc" @getValue="item.supportDoc = $event"></CommonFileUpload>
                                </el-form-item>
                                <el-divider style="margin-top: 0px"><icon name="delete" scale="2" @click.native="delItem('honours',index)"></icon></el-divider>
                            </el-form>
                            <div class="add-btn" @click="pushItem('honours')">
                                <i class="el-icon-plus"></i>
                            </div>
                        </div>
                        <div class="tempSaveBtn">
                            <el-button type="success" plain size="small" :disabled="buttonDisabled" @click="saveTempInfo()">保存</el-button>
                        </div>
                    </el-card>
                </el-col>
            </el-row>
        </el-form>
        <el-dialog
            v-if="qrCodeVis"
            :visible.sync="qrCodeVis"
            title="二维码信息"
            width="290px"
            :append-to-body="true">
            <div id="qrcode" style="margin: 0 auto;">
            </div>
            <div style="color: red;font-size: 16px;text-align: center">
                手机扫描二维码上传佐证材料！
                <br>
                仅限基本信息、工作信息模块！
            </div>
        </el-dialog>
        <el-dialog
          title="提示"
          :visible.sync="wageScaleVisible"
          append-to-body
          width="30%">
          <span>职务与薪酬等级不匹配，若要继续提交请上传佐证材料！</span>
          <el-form :model="wageScaleAnnexForm" :rules="wageScaleAnnexRules"  ref="wageScaleAnnexForm" label-width="80px" inline>
              <el-form-item label="佐证材料" prop="wageScaleAnnex" class="property-form-item">
                  <!-- <FileUpload :value="leaveForm.termFile" :limit="1" :disabled="false" @getValue="leaveForm.termFile = $event" style="width: 150px;" class="file_btn"></FileUpload> -->
                  <CommonFileUpload :isText=false  class="fileButton"  :value="wageScaleAnnexForm.wageScaleAnnex" @getValue="wageScaleAnnexForm.wageScaleAnnex = $event"></CommonFileUpload>
              </el-form-item>
          </el-form>
          <!-- <CommonFileUpload :isText=false  class="fileButton"  :value="wageScaleAnnex" @getValue="wageScaleAnnex = $event"></CommonFileUpload> -->
          <!-- <div v-if="!wageScaleAnnex" style="color: red">请上传佐证材料</div> -->
          <span slot="footer" class="dialog-footer">
            <el-button @click="wageScaleVisible = false">取 消</el-button>
            <el-button type="primary" @click="submitCheck('wageScaleAnnexForm')">确 定</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import LookUp from '@/lookup'
    import CommonFileUpload from '@/components/FileUpLoad';
    import QRCode  from "qrcodejs2"
    export default {
        name: "ReserveEdit",
        props: {
            currentSecretary: {
                type: Object
            },
            isHasTask: {
                type: Boolean,
                default: false
            },
            endTime: {
                type: String,
            },
        },
        watch: {
            'currentSecretary.id': {
                handler: function () {
                    let arr = {}
                    arr = JSON.parse(JSON.stringify(this.currentSecretary));
                    this.$http('get', `identity/villageCadres/${arr.id}id`,false).then(data => {
                      let obj1 = {}
                      if (JSON.stringify(data.villageCadresTemporaryes) !== '[]') {
                        obj1 = JSON.parse(data.villageCadresTemporaryes[0].cadresInfo)
                        obj1.state = data.villageCadresTemporaryes[0].statue
                      } else {
                        obj1 = data
                      }
                      console.log(data,'--------------------------------');
                      this.form = obj1;
                      console.log(this.form,'this.form');
                      // this.workExperienceList = form.workExperience
                      this.formatWorkExperienceList(this.form.workExperience)
                      this.initPost();
                      this.submitable = false;
                      if(this.form.state === '0'){
                          this.buttonDisabled = false;
                      }else{
                          this.buttonDisabled = true;
                      }
                      this.images = [];
                      this.images.push({name: 'avator.jpg', url: this.form.headSculpture});
                    })
                }
            },
            'form.hasOnTheJob': {
              handler: function () {
                  if (this.form.hasOnTheJob === '在职') {
                    this.isShowRetirementWage = false;
                    this.form.retirementWage = ''; 
                  } else if (this.form.hasOnTheJob === '退休') {
                    this.isShowRetirementWage = true;
                  }
              }
            },
            'dataDate': {
              handler: function () {
                console.log(this.dataDate,'dataDate');
              }
            }
        },
        data() {
            return {
                user: {},
                dataDate: '',
                form: {},
                activities: [],
                medicalInsuranceOptions:LookUp["MedicalInsurance"],
                socialSecurityDatabasesOptions:LookUp["SocialSecurityDatabases"],
                sexOptions:LookUp["Sex"],
                nationOptions:LookUp["nation"],
                eduOptions:LookUp["Education"],
                healthOptions:LookUp["health"],
                wageScaleOptions:LookUp["WageScale"],
                personOptions:LookUp["personTyle"],
                creditOptions:LookUp["credit"],
                rewardsTypeOptions:LookUp["rewardsTypeOptions"],
                honourDescriptionOptions:LookUp["honourDescriptionOptions"],
                honourType:LookUp["HonoursType"],
                Political : LookUp["Political"],
                politicalOutlook:LookUp['politicalOutlook'],
                trainingType : LookUp["TrainingType"],
                trainingTrueType : LookUp["trainingTrueType"],
                RankOptions: LookUp['rankOptions'],
                personFromOptions:LookUp["personFromTyle"],
                hasOnTheJob: LookUp['hasOnTheJob'],
                workExperiencePlaceholder: '任XX村支部组织委员',
                honoursList: [],
                postOptions:LookUp['Post'].filter(item => item.value),
                rules:{
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ],
                    identityCard: [
                        { required: true,validator: (rule, value, callback) => {
                                if (!this.form[rule.field]) {
                                    callback(new Error('请输入身份证号'));
                                } else {
                                    if (this.form[rule.field].length != 18) {
                                        callback(new Error('请输入18位的身份证号'));
                                    } else {
                                        callback();
                                        return true;
                                    }
                                }
                            }, trigger: 'blur' }
                    ],
                    sex: [
                        { required: true, message: '请选择性别',  trigger: 'blur' }
                    ],
                    birth: [
                        { required: true, message: '请选择出生日期',  trigger: 'blur' }
                    ],
                    contact: [
                        { required: true, message: '请输入联系电话', trigger: 'blur' }
                    ],
                    fullTimeEdu: [
                        { required: true, message: '请选择学历',  trigger: 'blur' }
                    ],
                    health: [
                        { required: true, message: '请选择健康状况',  trigger: 'blur' }
                    ],
                    creditStatus: [
                        { required: true, message: '请选择有无失信情况',  trigger: 'blur' }
                    ],
                    personnelType: [
                        { required: true, message: '请选择人员类型',  trigger: 'blur' }
                    ],
                    onDutyTime: [
                        { required: true, message: '请输入在村任职年限', trigger: 'blur' }
                    ],
                    partyTime:[
                        { required: true, message: '请选择入党时间',  trigger: 'blur' }
                    ],
                    politicalOutlook:[
                        { required: true, message: '请选择政治面貌',  trigger: 'blur' }
                    ],
                    memberOfCommittee:[
                        { required: true, message: '请选择',  trigger: 'blur' }
                    ]
                },
                editLoad:false,
                images: [],
                timer: '',
                qrCodeVis: false,
                submitable: false,
                buttonDisabled:true,
                cadresPostList:[],
                isShowRetirementWage: false,
                workExperienceList: [],
                wageScaleVisible: false,
                wageScaleAnnex: undefined,
                wageScaleAnnexForm: {
                  wageScaleAnnex: ''
                },
                 wageScaleAnnexRules:{
                    wageScaleAnnex: [
                        {required: true, validator: (rule, value, callback) => {
                                if (!this.wageScaleAnnexForm[rule.field]) {
                                    callback(new Error('请上传佐证材料！'));
                                } else {
                                    callback();
                                    return true;
                                }
                            }, trigger: 'change'},
                    ]
                },
            }
        },
        components: {
            CommonFileUpload,
        },
        methods: {
            loadUpdateInfoList() {
                this.$http('POST', `identity/informationAudit/list?sort=createdAt,desc`,
                    {villageId: this.form.id, processType: '村干部信息更新'}, false).then(data => {
                    this.activities = [];
                    for (let i = 0; i < data.length; i++) {
                        let obj = {};
                        obj.modifiedAt = new Date(data[i].modifiedAt).Format("yyyy-MM-dd HH:mm");
                        obj.auditor = data[i].auditor;
                        obj.auditAdvice = data[i].auditAdvice;
                        obj.status = data[i].status;
                        this.activities.push(obj);
                    }
                });
            },
            uploadFile(http) {
                let file = http.file;
                let formData = new FormData();
                formData.append('file', file);
                this.$http('POST', '/zuul/identity/accessory/', formData, false).then(
                    res => {
                        this.images = [];
                        this.images.push({name: file.name, url: res.path});
                        this.form.headSculpture = res.path;
                    }
                )
            },
            formatWorkExperienceList(value){
              console.log(value, 'workExperience');
              let str = ''
              let arr = []
              if (value instanceof Array) {
                console.log('11111');
                value.forEach(item => {
                  console.log(item.dateEnd,'item.dateEnd');
                  let str1 = item.dateStart+','+'-'+','+(item.dateEnd || '至今')+',' + '    ' +item.note
                  str += str1 + '\n'
                })
                console.log(str, 'str111');
                return str
              } else if (typeof(value)=='string') {
                this.workExperienceList = []
                let arr1 = value.split(/[\n]/);
                console.log(arr1,'arr1');
                arr1.pop()
                arr1.forEach(item => {
                  let obj = {}
                  let arr2 = []
                  arr2 = item.replace(/ /g,"").split(',')
                  console.log(obj);
                  obj.dateStart = arr2[0]
                  obj.dateEnd = arr2[2]
                  obj.note = arr2[3]
                  this.workExperienceList.push(obj)
                })
              }
            },
            // 工作简历时间线
            handleWorkExperience(workExperience) {
                if (!workExperience) {
                    return [];
                }
                let arr = workExperience.split(/[\n]/)
                console.log(arr,'arr');
                // return workExperience.split(/[\n]/);
            },
            getSum(item) {
                item.totalReward = (parseFloat(item.basicReward) * 100  + parseFloat(item.reviewReward) * 100 + parseFloat(item.otherReward) * 100 + parseFloat(item.des) * 100) / 100;
            },
            pushItem(field) {
              console.log(field,'field');

                if (field === 'rewards') {
                    this.form[field].push({
                        cadresId: this.form.id,
                        basicReward: 0,
                        reviewReward: 0,
                        otherReward: 0,
                        totalReward: 0,
                        des: 0
                    })
                } else if (field === 'workExperience') {
                  this.workExperienceList.push({dateStart: '',dateEnd: '', note: ''})
                }
                 else {
                    this.form[field].push({cadresId: this.form.id})
                }
            },
            delItem(field, index) {
              if (field == 'workExperience') {
                this.workExperienceList.splice(index, 1)
              } else {
                this.form[field].splice(index, 1);
              }
            },
            getBaseInfo(id) {
                return this.$http('GET', `identity/villageCadres/${id}id`, false).then(data => {
                    this.form = data;
                    this.images = [];
                    this.images.push({name: 'avator.jpg', url: data.headSculpture});
                    return data;
                })
            },
            saveBaseInfo(form){
                this.$refs[form].validate((valid) => {
                    if (valid) {
                        if(!this.form.identityCardAnnex||!this.form.educationAnnex||!this.form.workTimeAnnex||(this.form.politicalOutlook==='党员'&&!this.form.partyTimeAnnex)){
                            this.$message({
                                type: 'warning',
                                message: '身份证、任职时长、学历或入党时间等佐证材料未上传完整，请补全佐证材料!'
                            });
                        }else{
                            let workExperienceStr = this.formatWorkExperienceList(this.workExperienceList)
                            this.editLoad = true;
                            let formDTO =  Object.assign({}, this.form);
                            formDTO.trainingInfoDTOS = formDTO.trainingInfoVOS;
                            formDTO.familyInfoDTOS = formDTO.familyInfoVOS;
                            formDTO.familyWorkInfoDTOS = formDTO.familyWorkInfoVOS;
                            formDTO.workExperience = workExperienceStr;
                            delete formDTO.trainingInfoVOS;
                            delete formDTO.familyInfoVOS;
                            delete formDTO.familyWorkInfoVOS;
                            // this.$http('PUT', `identity/villageCadres/${formDTO.id}id`,formDTO, false).then(content => {
                            this.$http('PUT', `identity/villageCadres/updateTemporary/${formDTO.id}id`,formDTO, false).then(content => {
                                // this.getBaseInfo(formDTO.id).then(
                                    // res => {
                                      console.log(content.cadresInfo, 'content');
                                      this.form = JSON.parse(content.cadresInfo)
                                        this.editLoad = false;
                                        this.submitable = true;
                                        // this.$emit("handleFinish", res);
                                        this.$message({
                                            type: 'success',
                                            message: '当前信息保存成功！'
                                        });
                                    // }
                                // )
                            })
                        }
                    }else{
                        this.$message({
                            type: 'warning',
                            message: '存在未填写的信息，请补全信息！'
                        });
                    }
                })
            },
            saveTempInfo(){
                let workExperienceStr = this.formatWorkExperienceList(this.workExperienceList)
                // console.log(this.workExperienceList, 'this.workExperienceList');
                this.editLoad = true;
                let formDTO =  Object.assign({}, this.form);
                formDTO.trainingInfoDTOS = formDTO.trainingInfoVOS;
                formDTO.familyInfoDTOS = formDTO.familyInfoVOS;
                formDTO.familyWorkInfoDTOS = formDTO.familyWorkInfoVOS;
                formDTO.workExperience = workExperienceStr;
                delete formDTO.trainingInfoVOS;
                delete formDTO.familyInfoVOS;
                delete formDTO.familyWorkInfoVOS;
                // this.$http('PUT', `identity/villageCadres/${formDTO.id}id`,formDTO, false).then(content => {
                this.$http('PUT', `identity/villageCadres/updateTemporary/${formDTO.id}id`,formDTO, false).then(content => {

                    // this.getBaseInfo(formDTO.id).then(
                    //     res => {
                            this.form = JSON.parse(content.cadresInfo)
                            this.submitable = true;
                            this.editLoad = false;
                            // this.$emit("handleFinish", res);
                            this.$message({
                                type: 'success',
                                message: '当前信息保存成功！'
                            });
                    //     }
                    // )
                    return content
                })
            },
            submit() {
              this.$http('PUT',`identity/villageCadres/checkSalaryHasMatchingPost`, {
                post:'OUT_SECRETARY',
                salary: this.form.wageScale
              },false).then(res => {
                console.log(res.res,'+++++++++++++');
                if (res.res) {
                  this.editLoad = true;
                  this.$http('PUT', `identity/villageCadres/secretarySubmit/${this.form.id}`, false).then(content => {
                      this.getBaseInfo(this.form.id).then(
                          res => {
                            console.log(res, 'ressss');
                              this.form = JSON.parse(res.villageCadresTemporaryes[0].cadresInfo)
                              this.form.state = res.villageCadresTemporaryes[0].statue
                              this.editLoad = false;
                              this.submitable = false;
                              this.buttonDisabled = true;
                              // this.$emit("handleFinish", res);
                              this.$message({
                                  type: 'success',
                                  message: '当前信息提交成功！'
                              });
                          }
                      )
                  });
                } else {
                  console.log('111111111111');
                  this.wageScaleVisible = true
                }
              })
            },
            submitCheck(form){
              console.log(this.$refs, 'form');
              this.$refs[form].validate((valid) => {
                    if (valid) {
                      let that = this
                        this.form.wageScaleAnnex = this.wageScaleAnnexForm.wageScaleAnnex
                        this.wageScaleVisible = false
                        let workExperienceStr = this.formatWorkExperienceList(this.workExperienceList)
                        // console.log(this.workExperienceList, 'this.workExperienceList');
                        this.editLoad = true;
                        let formDTO =  Object.assign({}, this.form);
                        formDTO.trainingInfoDTOS = formDTO.trainingInfoVOS;
                        formDTO.familyInfoDTOS = formDTO.familyInfoVOS;
                        formDTO.familyWorkInfoDTOS = formDTO.familyWorkInfoVOS;
                        formDTO.workExperience = workExperienceStr;
                        delete formDTO.trainingInfoVOS;
                        delete formDTO.familyInfoVOS;
                        delete formDTO.familyWorkInfoVOS;
                        // this.$http('PUT', `identity/villageCadres/${formDTO.id}id`,formDTO, false).then(content => {
                        this.$http('PUT', `identity/villageCadres/secretarySubmitTemporary/${formDTO.id}id`,formDTO, false).then(content => {

                            // this.getBaseInfo(formDTO.id).then(
                            //     res => {
                                    this.form = JSON.parse(content.cadresInfo)
                                    // this.submitable = true;
                                    // this.editLoad = false;
                                    // this.form = JSON.parse(res.villageCadresTemporaryes[0].cadresInfo)
                                    this.form.state = content.statue
                                    this.editLoad = false;
                                    this.submitable = false;
                                    this.buttonDisabled = true;
                                    // this.$emit("handleFinish", res);
                                    this.$message({
                                        type: 'success',
                                        message: '当前信息提交成功！'
                                    });
                            //     }
                            // )
                            return content
                        })
                        // this.saveTempInfo().then(res => {

                        //   this.$http('PUT', `identity/villageCadres/secretarySubmit/${this.form.id}`, false).then(content => {
                        //     this.getBaseInfo(this.form.id).then(
                        //         res => {
                        //           console.log(res, 'ressss');
                        //             this.form = JSON.parse(res.villageCadresTemporaryes[0].cadresInfo)
                        //             this.form.state = res.villageCadresTemporaryes[0].statue
                        //             this.editLoad = false;
                        //             this.submitable = false;
                        //             this.buttonDisabled = true;
                        //             // this.$emit("handleFinish", res);
                        //             this.$message({
                        //                 type: 'success',
                        //                 message: '当前信息提交成功！'
                        //             });
                        //         }
                        //     )
                        // });
                        // })
                    }
                });
            },
            loadAnnex() {
                this.$http('POST', '/identity/villageCadresAnnex/list', {cadresId: this.form.id}, false).then(data => {
                    data.forEach(item => {
                        this.form[item.type] = item.filePath;
                    })
                })
            },
            showQrCode() {
                this.qrCodeVis = true;
                this.$nextTick(() => {
                    let token = sessionStorage.getItem("token");
                    document.getElementById('qrcode').innerHTML = '';
                    let qrcode = new QRCode('qrcode', {
                        width: 250,
                        height: 250,
                        text: `http://122.97.218.162:21018/#/mobileUploadFile?cadreId=${this.form.id}&token=${token}`
                    })
                })
            },
            handleImage(imageUrl){
                let arr = [];
                if(imageUrl){
                    if(imageUrl.indexOf(',')>-1){
                        imageUrl.split(',').forEach(item => {
                            arr.push(item.split('&')[0]);
                        })
                    }else{
                        arr.push(imageUrl.split('&')[0]);
                    }
                }
                return arr;
            },
            handlePost(){
                this.form.cadresPost = this.cadresPostList.join(',');
            },  
            initPost(){
                this.cadresPostList = [];
                if(this.form.cadresPost){
                    this.cadresPostList = this.form.cadresPost.split(",");
                }
            },
            handlePartyTime(val){
                if(val!=='党员'){
                    this.form.partyTime = null;
                }
            }
        },
        mounted() {
            this.user = JSON.parse(sessionStorage.getItem('userInfo'));
            // this.form = JSON.parse(JSON.stringify(this.currentSecretary));
            this.initPost();
            if(this.medicalInsuranceOptions.filter(item=> item.label==='无').length==0){
                this.medicalInsuranceOptions.push({label:'无',value:'无'});
            }
            if(this.socialSecurityDatabasesOptions.filter(item=> item.label==='无').length==0){
                this.socialSecurityDatabasesOptions.push({label:'无',value:'无'});
            }
            if(this.form.state === '0'){
                this.buttonDisabled = false;
            }else{
                this.buttonDisabled = true;
            }
            this.images = [];
            this.images.push({name: 'avator.jpg', url: this.form.headSculpture});
            this.timer = setInterval(() => {
                this.loadAnnex();
            }, 10000)
        },
        beforeDestroy() {
            window.clearInterval(this.timer);
        }
    }
</script>

<style scoped>
    .baseMassage {
        background-image: url("../../../static/messageBg/cardBg.png");
        background-size: 100% 100%;
    }
    .workMessage {
        background-image: url("../../../static/messageBg/workMessageBg.png");
        background-size: 100% 100%;
    }
    /* .workExperience {
         background-image: url("../../static/messageBg/workExperienceBg.png");
         background-size: 100% 100%;
     }
     .repaid {
         background-image: url("../../static/messageBg/repaidBg.png");
         background-size: 100% 100%;
     }
     .family {
         background-image: url("../../static/messageBg/familyBg.png");
         background-size: 100% 100%;
     }
     .inCountry {
         background-image: url("../../static/messageBg/inCountryBg.png");
         background-size: 100% 100%;
     }
     .train {
         background-image: url("../../static/messageBg/trainBg.png");
         background-size: 100% 100%;
     }
     .honer {
         background-image: url("../../static/messageBg/honerBg.png");
         background-size: 100% 100%;
     }
     .assessment {
         background-image: url("../../static/messageBg/assessmentBg.png");
         background-size: 100% 100%;
     }*/
    .ReserveEdit .cardTitle{
        padding: 20px 20px 0 20px;
        text-align: left;
    }
    .ReserveEdit .cardContent{
        min-height: 205px;
        padding: 0px 20px;
        /* text-align: left; */
    }
    .ReserveEdit .tempSaveBtn{
        text-align: right;
        margin: 10px 16px 10px 0;
    }
    .ReserveEdit .fileButton{
        width: 160px;
        text-align: left;
        display: inline-block
    }
    .socialSecurityForm .card_line {
      margin: 8px 0;
      border-top: 1px dashed #ccc;
    }
</style>
<style>
    .edit-form  .el-input {
        display: inline-block;
    }
    .edit-form .el-input__prefix .el-button {
        position: relative;
        top: -2px;
        left: -24px;
    }
    .edit-form .el-input .el-input--prefix .el-input__inner {
        padding-left: 0;
    }
    .edit-form .el-date-editor.el-input--prefix .el-input__inner {
        padding-left: 30px !important;
    }
    .ReserveEdit .edit-form .el-form-item__error {
        margin-left: 15px;
        position: relative;
        left: -48px;
        top: 100%;
    }

    #qrcode img {
        display: inline-block !important;
    }
    .header-content .el-card__body{
        padding: 0 !important;
    }
    .header-content .el-upload--picture-card {
        width: 160px!important;
        height: 227px!important;
        margin: 15px auto 10px auto;
        left: 55px;
        position: absolute;
    }
    .header-content .el-upload-list--picture-card .el-upload-list__item {
        width: 160px!important;
        height: 227px!important;
        margin: 15px auto 10px auto;
        position: absolute;
        top: 16px;
        left: 55px;
        z-index: 99;
    }
    .name-input {
        display: inline-block!important;
        width: 50px!important;
        position: relative!important;
        height: 30px!important;
        margin-top: -8px!important;
    }
    .name-input .el-input__inner {
        width: 50px;
        margin-bottom: 10px;
        padding: 0;
        font-size: 16px;
        border: none;
        background: transparent;
        color: goldenrod;
        text-align: left;
    }
    .add-btn {
        width: 100%;
        height: 45px;
        border-radius: 20px;
        border: 1px #d9d9d9 dashed;
        cursor: pointer;
        clear: both;
    }
    .add-btn i {
        font-size: 28px!important;
        line-height: 44px;
        color: #d9d9d9;
    }
    .add-btn:hover {
        background: #f8f8f8;
    }
    .ReserveEdit svg{
        margin: 0 5px!important;
    }
    .ReserveEdit .el-form--label-top .el-form-item__label {
        float: left!important;
        text-align: left!important;
        padding: 0!important;
    }
    .ReserveEdit .familyWorkStyle{
        width: 30%;
        float: left;
        margin: 5px 20px;
    }
    .el-divider__text.is-center svg {
        cursor: pointer;
    }
    .qrcode-content {
        color: #2B2B2B;
        float: right;
        transition: all .3s;
        position: relative;
        top: -30px;
    }
    .qrcode-content:hover {
        color: #409eff;
        transform:scale(1.1);
        cursor: pointer;
    }
    .ReserveEdit .el-input--prefix .el-input__inner{
        padding-left: 15px!important;
    }
    .ReserveEdit .el-input--suffix .el-input__inner{
        padding-right: 0px!important;
    }
    .ReserveEdit .el-input {
        width: 160px;
    }
    .ReserveEdit .el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
        margin-bottom: 10px!important;
    }
    .ReserveEdit .el-input--mini .el-input__inner {
        width: 160px !important;
    }
    .ReserveEdit .el-select {
        width: 160px !important;
    }
    .ReserveEdit .el-date-editor.el-input, .el-date-editor.el-input__inner {
        width: 160px !important;
    }
    .ReserveEdit .cardContent .el-textarea__inner{
        /* width: 160px!important; */
    }
    .ReserveEdit .cardContent .el-form-item{
        margin: 0 18px;
    }
    .ReserveEdit .villageEditSel .el-tag{
        height: 20px!important;
        font-size:12px!important;
        line-height: 20px!important;
    }
    .ReserveEdit .workExperience .el-date-editor.el-input__inner {
      width: 300px!important;
    }
</style>














